<template>
    <div class="modPage" @mouseover="showset" @mouseout="hideset" :style="{color:defaultmoddata.config.fontcolor}">
        <div class="title">
            <div class="titlecon">
                <div class="title-box">{{defaultmoddata.config.title}}</div>
            </div>
        </div>
        <div class="ssp_stampHeader"></div>
        <div class="modPagecontent">
            <ul>
                <li v-for="field in defaultmoddata.config.fields" class="fielditem">
                    <span>{{field.Title}}：</span>
                    <span class="key" v-html="comValue(field)"></span>
                </li>
            </ul>
            <div class="clearstyle" v-html="defaultmoddata.config.content"></div>
        </div>
        <div class="ssp_stampFooter"></div>
        <div class="mask" v-show="maskshow">
            <div class="settingbtn" @click="headset">
                <i class="el-icon-setting"></i> 设置</div>
            <div class="deletebtn" @click="deletemod">
                <i class="el-icon-delete"></i> 删除</div>
        </div>
        <div class="bg"></div>
    </div>
</template>

<script>
    export default {
        props: ["taskdata", "moddata", "index", "container", "fielddatas"],
        data: function () {
            return {
                maskshow: false,
            }
        },
        computed: {
            defaultmoddata() {
                if (this.moddata) {
                    return this.moddata
                } else {
                    return this.container.items[this.$route.params.index]
                }
            }
        },
        methods: {
            showset: function () {
                this.maskshow = true;
            },
            hideset: function () {
                this.maskshow = false;
            },
            headset: function () {
                this.$emit('setmod', 'MyMod', this.index, "BasicModule")
            },
            deletemod: function () {
                this.$emit("delreq", this.index)
            },
            comValue: function (field) {
                if (this.fielddatas[field.Id]) {
                    switch (field.Type) {
                        case 0:
                            return this.fielddatas[field.Id];
                            break;
                        case 1:
                            return this.fielddatas[field.Id];
                            break;
                        case 2:
                            var val = JSON.parse(this.fielddatas[field.Id]);
                            if(val.length){
                                return val[0].value;
                            }else{
                                return ""
                            }
                            break;
                        case 3:
                            var str = "";
                            var val = JSON.parse(this.fielddatas[field.Id]);
                            val.forEach(function (item,index) {
                                if(index != val.length - 1){
                                    str += item.value + "&nbsp,&nbsp";
                                }else{
                                    str += item.value;
                                }
                            })
                            return str;
                            break;
                        default :
                            return "";
                            break;
                    }
                }

            }
        }
    }
</script>

<style scoped>
    .modPage {
        position: relative;
        padding: 15px;
    }

    .modPage .modPagecontent {
        padding: .444444rem;
        overflow-x: hidden;
        min-height: 2.222222rem;
        font-size: 16px;
        background: #ffffff;
    }

    .modPage .modPagecontent p {
        line-height: 24px;
    }

    .fielditem {
        margin-bottom: 5px;
    }

    .key {
        color: #999;
    }

    div.ssp_stampHeader {
        background-image: url(/Areas/Template/Content/Module/img/bj-05.png);
        -ms-background-size: contain;
        background-size: contain;
        height: 20px;
        margin-top: 10px;
    }

    div.ssp_stampFooter {
        background-image: url(/Areas/Template/Content/Module/img/bj-06.png);
        -ms-background-size: contain;
        background-size: contain;
        height: 20px;
    }

    .modPage .title .titlecon {
        padding: 0;
    }
</style>